<!-- 自动扶梯 -->
<template>
  <div class="diandongfuti">
    <img class="bg" :src="obj.map" alt="bg" />
    <img v-if="obj.direct" class="sy" :src="obj.direct" alt="direct" />
  </div>
</template>
<script setup name="diandongfuti">
import { computed } from "vue";
import act_up from "/public/devices/daindongfuti/ZFT_1.png";
import direct_up from "/public/devices/daindongfuti/ZFT_green_up.png";
import act_down from "/public/devices/daindongfuti/ZFT_3.png";
import direct_down from "/public/devices/daindongfuti/ZFT_green_down.png";
import close_up from "/public/devices/daindongfuti/ZFT_grey.png";
import { userStore } from "@/store/modules/userStore";
const store = userStore();

const props = defineProps({
  redirect: {
    type: String,
    required: false,
    default: "down"
  },
  data: {
    type: Object,
    required: false,
    default: () => ({})
  }
});

let open = true;
const active = computed(() => {
  const modules = store.getOperateList.filter((v) => v.currentComName === store.getCurrentComName);
  if (modules.length) {
    let exist = modules.find((v) => v.index === props.data.index);
    open = !exist;
  }
  return open;
});

const obj = computed(() => {
  if (active.value) {
    return props.redirect === "up"
      ? {
          map: act_up,
          direct: direct_up
        }
      : {
          map: act_down,
          direct: direct_down
        };
  }
  return {
    map: close_up
  };
});
</script>
<style scoped lang="less">
.diandongfuti {
  width: 36px;
  height: 48px;
  cursor: pointer;
  position: relative;
  transform: rotate(5deg);
  background: #073650;
  .bg {
    width: 100%;
    height: 100%;
  }
  .sy {
    width: 20px;
    height: 20px;
    transform: translate(27px, -18px) rotate(-5deg);
  }
}
</style>
